// 饼图对象组件

var H5ComponentPie = function(name, cfg) {
	var component = new H5ComponentBase(name, cfg);

	var w = cfg.width;
	var h = cfg.height;

	//加入一个画布（背景）
	var cns = document.createElement('canvas');
	var ctx = cns.getContext('2d');
	cns.width = ctx.widht = w;
	cns.height = ctx.height = h;
	component.append(cns);

	var r = w/2;
	var step = cfg.data.length;
	

	ctx.beginPath();
	ctx.fillStyle = '#e5e5e5';
	ctx.arc(r, r, r, 0, 2*Math.PI);
	ctx.closePath();
	ctx.fill();

	//绘制数据层，加入一个画布，z-index为2
	var cns = document.createElement('canvas');
	var ctx = cns.getContext('2d');
	cns.width = ctx.widht = w;
	cns.height = ctx.height = h;
	$(cns).css('zIndex', 2);
	component.append(cns);

	var sAngle = 1.5 * Math.PI;
	var eAngle = 0;
	var aAngle = 2 * Math.PI;
	var colorArr = ['#4caf50', '#4c7aaf', '#634caf', '#ff9e57', '#5bc0de'];

	for(var i = 0; i < step; i++) {
		var item = cfg.data[i];
		var color = colorArr.pop();

		eAngle = aAngle * item[1] + sAngle;

		ctx.beginPath();
		ctx.moveTo(r, r);
		ctx.arc(r, r, r, sAngle, eAngle);
		ctx.closePath();
		ctx.fillStyle = color;
		ctx.fill();

		sAngle = eAngle;

		//加入所有的项目文本以及百分比
		var rad = .5 * Math.PI - sAngle;
		var x = r + r * Math.sin(rad);
		var y = r + r * Math.cos(rad);
		var text = $('<div class="text"></div>');
		text.text(item[0]);
		var per = $('<div class="per"></div>');
		per.text(item[1]*100 + '%');
		text.append(per);
		if(x > w/2) {
			text.css('left', x/2 + 5 + 'px');
		}else{
			text.css('right', (w - x)/2 + 5 + 'px');
		}
		if(y >= h/2) {
			text.css('top', y/2 + 5 + 'px');
		}else{
			text.css('bottom', (h - y)/2 + 5 + 'px');
		}
		if(cfg.data[i][2]) {
			text.css('color', cfg.data[i][2]);
		}else{
			text.css('color', color);
		}
		text.css('opacity', 0);
		text.css('transition-delay', .1 * i + 's');
		component.append(text);
	}

	//绘制蒙板动画层,加入一个画布,z-index为3
	var cns = document.createElement('canvas');
	var ctx = cns.getContext('2d');
	cns.width = ctx.widht = w;
	cns.height = ctx.height = h;
	$(cns).css('zIndex', 3);
	component.append(cns);

	ctx.fillStyle = '#e5e5e5';

	/**
	 * 绘制饼图遮罩层动画
	 * @param  {[float] per 0到1之间的数据，会根据这个值绘制最终数据对应到中间状态}
	 * @return {[]} 
	 */
	var draw = function(per) {
		if(per >= 1) {
			component.find('.text').css('opacity', 1);
		}else{
			component.find('.text').css('opacity', 0);
		}

		ctx.clearRect(0, 0, w, h);

		ctx.beginPath();
		ctx.moveTo(r, r);
		if(per <= 0) {
			ctx.arc(r, r, r, 0, 2*Math.PI);
		}else{
			ctx.arc(r, r, r, sAngle, sAngle + 2*Math.PI * per, true);
		}
		ctx.fill();
	}

	draw(0);
	
	component.on('onLoad', function() {
		//饼图生长动画
		var s = 0;
		for(var i = 0; i < 100; i++){
			setTimeout(function() {
				s += 0.01;
				draw(s);
			}, 10*i + 1000);
		}
	});

	component.on('onLeave', function() {
		//饼图退场动画
		var s = 1;
		for(var i = 0; i < 100; i++){
			setTimeout(function() {
				s -= 0.01;
				draw(s);
			}, 10*i);
		}
	});


	return component;
}